
import '../utils/multipleSelect/index.js'
import $ from 'jquery'
export default class MultipleListEditor {
  editorType = 'input';
  input;
  editorConfig;
  container;
  element;
  successCallback;

  constructor() {
  }

  createElement(value) {
    // create select tag
    const select = document.createElement('select');
    select.setAttribute('type', 'text');
    // select.setAttribute('multiple', 'true');
    select.style.position = 'absolute';
    select.style.padding = '4px';
    select.style.width = '100%';
    select.style.boxSizing = 'border-box';
    select.style.backgroundColor = '#FFFFFF';
    select.style.borderRadius = '0px';
    select.style.border = '2px solid #d9d9d9';
    // #region 为了保证input在focus时，没有圆角
    select.addEventListener('focus', () => {
      select.style.borderColor = '#4A90E2';
      select.style.outline = 'none';
    });

    select.addEventListener('blur', () => {
      select.style.borderColor = '#d9d9d9';
      // input.style.boxShadow = 'none';
    });

    this.element = select;

    // create option tags
    const { values } = this.editorConfig;
    let opsStr = '';
    values.forEach(item => {
      opsStr +=
        item === value
          ? `<option value="${item}" selected>${item}</option>`
          : `<option value="${item}" >${item}</option>`;
    });
    select.innerHTML = opsStr;
    this.container.appendChild(select);
    let $select = $(select)
    $select.multipleSelect({
      ellipsis: false,
      singleRadio: true
    })
    let multipleSelectElement = $select.next()[0];
    this.multipleSelectElement = multipleSelectElement;
    this.$select = $select
  }

  setValue(value) {
    if(value){
      this.$select.multipleSelect('setSelects', [value])
    }
  }

  getValue() {
    /*
    let data = this.$select.multipleSelect('getData')
    let result = data.filter(t => t.selected).map(t=>t.value)
    */
   /**/
    let result = this.$select.multipleSelect('getSelects', 'text')
    return result[0];
  }

  onStart({ container, value, referencePosition, endEdit ,col, table}) {
    // console.log('onStart multipleListEditor', arguments);
    this.editorConfig = table.columns[col].editorConfig || {values: []}
    this.container = container;
    this.successCallback = endEdit;

    this.createElement(value);

    if (value !== undefined && value !== null) {
      this.setValue(value);
    }
    if (referencePosition?.rect) {
      this.adjustPosition(referencePosition.rect);
    }
    this.element.focus();
  }

  adjustPosition(rect) {
    //使border均分input位置rect的上下左右
    const borderWidth = 2;
    const top = rect.top - borderWidth / 2;
    const left = rect.left - borderWidth / 2;
    const width = rect.width + borderWidth;
    const height = rect.height + borderWidth;

    this.multipleSelectElement.style.top = top + 'px';
    this.multipleSelectElement.style.left = left + 'px';
    this.multipleSelectElement.style.width = width + 'px';
    this.multipleSelectElement.style.height = height + 'px';
  }

  endEditing() {
    // do nothing
  }

  onEnd() {
    console.log('onEnd multipleListEditor');
    this.$select.multipleSelect('destroy')
    this.container.removeChild(this.element);
  }

  isEditorElement(target) {
    return target === this.element;
  }
}
